<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="ruleForm"
				:model="queryData"
				label-width="100px"
				label-suffix=":"
				:inline="true"
				class="demo-ruleForm"
			>
				<el-form-item
					:label="`${$t('dxn.card_ables_list.table_id')}`"
					prop="tableCode"
				>
					<el-input
						v-model.trim="queryData.tableCode"
						v-input="{ name: 'symbols' }"
						clearable
						style="width: 230px"
						:placeholder="
							`${$t('dxn.card_ables_list.table_id_placeholder')}`
						"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="`${$t('dxn.card_ables_list.table_state')}`"
					prop="statusList"
				>
					<el-select
						v-model="queryData.statusList"
						clearable
						multiple
						:placeholder="
							`${$t(
								'dxn.card_ables_list.table_state_placeholder'
							)}`
						"
					>
						<el-option
							v-for="item in statusOptions"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('dxn.card_ables_list.game_name')}`"
					prop="tableTypeList"
				>
					<el-select
						v-model="queryData.tableTypeList"
						clearable
						:placeholder="
							`${$t('dxn.card_ables_list.game_name_placeholder')}`
						"
						multiple
						style="width:220px"
					>
						<el-option
							v-for="item in gameTypes"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<span slot="label">
						盲注:
						<el-popover
							placement="top-start"
							width="auto"
							trigger="hover"
							content="以“大盲值（德州）、前注值（短牌）”查询，包含最小、最大值范围数据"
						>
							<span slot="reference">
								<i class="el-icon-question"></i>
							</span>
						</el-popover>
					</span>

					<el-input
						v-model="queryData.blindScoreMin"
						size="medium"
						:placeholder="$t('common.minimum')"
						style="width: 120px"
						maxLength="15"
						v-input="{ name: 'float', num: '2' }"
						name="blindScoreMin"
						clearable
						@blur="
							handleAmount(
								queryData,
								1,
								'blindScoreMin',
								'blindScoreMax',
								$t('member.check_min_tips')
							)
						"
					></el-input>

					-

					<el-input
						v-model="queryData.blindScoreMax"
						size="medium"
						:placeholder="$t('common.maximum')"
						style="width: 120px"
						maxLength="15"
						v-input="{ name: 'float', num: '2' }"
						name="blindScoreMax"
						clearable
						@blur="
							handleAmount(
								queryData,
								2,
								'blindScoreMin',
								'blindScoreMax',
								$t('member.check_max_tips')
							)
						"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="`牌桌创建时间`"
					prop="dateTime"
					label-width="120px"
				>
					<el-date-picker
						v-model="queryData.dateTime"
						type="datetimerange"
						range-separator="-"
						:start-placeholder="
							$t('dxn.card_ables_list.start_time')
						"
						:end-placeholder="$t('dxn.card_ables_list.end_time')"
						format="yyyy-MM-dd HH:mm:ss"
						:picker-options="pickerShortcut2"
						:default-time="defaultTime"
						value-format="timestamp"
						align="right"
					></el-date-picker>
				</el-form-item>
				<el-form-item label="会员总输赢范围" label-width="120px">
					<el-input
						v-model="queryData.netAmountMin"
						size="medium"
						:placeholder="$t('common.minimum')"
						style="width: 120px"
						maxLength="15"
						v-input="{ name: 'onlyTwoNum' }"
						name="netAmountMin"
						clearable
						@blur="
							handleAmount(
								queryData,
								1,
								'netAmountMin',
								'netAmountMax',
								$t('member.check_min_tips')
							)
						"
					></el-input>

					-

					<el-input
						v-model="queryData.netAmountMax"
						size="medium"
						:placeholder="$t('common.maximum')"
						style="width: 120px"
						maxLength="15"
						v-input="{ name: 'onlyTwoNum' }"
						name="netAmountMax"
						clearable
						@blur="
							handleAmount(
								queryData,
								2,
								'netAmountMin',
								'netAmountMax',
								$t('member.check_max_tips')
							)
						"
					></el-input>
				</el-form-item>
				<!-- <el-form-item
					:label="`${$t('dxn.card_ables_list.club_name')}`"
					prop="clubName"
				>
					<el-input
						v-model.trim="queryData.clubName"
						v-symbols
						clearable
						:placeholder="
							`${$t('dxn.card_ables_list.club_name_placeholder')}`
						"
					></el-input>
				</el-form-item> -->
				<el-form-item
					:label="`牌桌所属俱乐部ID`"
					prop="clubId"
					label-width="135px"
				>
					<el-input
						v-model.trim="queryData.clubId"
						v-input="{ name: 'num' }"
						clearable
						style="width: 160px"
						:placeholder="`${$t('common.please_enter')}`"
					></el-input>
				</el-form-item>
				<el-form-item label="会员账号">
					<el-input
						v-model.trim="queryData.userName"
						v-input="{ name: 'noEmpty' }"
						clearable
						style="width: 210px"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="`会员所属俱乐部ID`"
					prop="userClubId"
					label-width="135px"
				>
					<el-input
						v-model.trim="queryData.userClubId"
						v-input="{ name: 'num' }"
						clearable
						style="width: 160px"
						:placeholder="`${$t('common.please_enter')}`"
					></el-input>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="disabledSearch"
						:loading="disabledSearch"
						size="medium"
						@click="handleSearch"
					>
						{{ $t('dxn.card_ables_list.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-right"
						size="medium"
						@click="reset"
					>
						{{ $t('dxn.card_ables_list.reset') }}
					</el-button>
					<el-button
						v-if="hasPermission('90870054')"
						type="warning"
						icon="el-icon-download"
						size="medium"
						:loading="exportBtnLoading"
						@click="exportExcel"
					>
						{{ $t('dxn.card_ables_list.export_excel') }}
					</el-button>
					<el-button
						v-if="hasPermission('90870091')"
						type="success"
						icon="el-icon-sort"
						size="medium"
						@click="showColumnSet"
					>
						{{ $t('common.row_set') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				ref="refTable"
				@current-change="handleSelectRowHighlight"
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				size="mini"
				class="small-size-table"
				border
				:data="list"
				style="width: 100%"
				:max-height="tableHeight"
				:header-cell-style="getRowClass"
				highlight-current-row
				header-align="center"
				@sort-change="handleTableSort"
				show-summary
				:summary-method="
					(val) => handleRow(val, subSummary, totalSummary)
				"
			>
				<el-table-column
					type="index"
					label="序号"
					width="120"
					align="center"
				/>
				<el-table-column
					label="会员账号"
					min-width="120"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.userName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					label="会员昵称"
					min-width="120"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.nickName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.userClubId]"
					label="会员所属俱乐部ID"
					min-width="125"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<div
							v-if="scope.row.userClubId"
							class="text-link"
							@click="
								$router.push({
									path: '/dxn/clubManager/clubList',
									query: {
										clubId: scope.row.userClubId
									}
								})
							"
						>
							{{ scope.row.userClubId }}
						</div>
						<div v-else>-</div>
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.status]"
					label="状态"
					min-width="80"
					align="center"
				>
					<template slot-scope="scope">
						<span>
							{{
								getTypeName(
									scope.row.status,
									cardTableStatusArr
								)
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.createdAt]"
					label="牌桌创建时间"
					min-width="160"
					align="center"
					show-overflow-tooltip
					prop="tableCreateDate"
					sortable="custom"
				>
					<template slot-scope="scope">
						{{ scope.row.tableCreateDate || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.tableBeginDate]"
					label="牌桌开始时间"
					min-width="160"
					align="center"
					show-overflow-tooltip
					prop="tableBeginDate"
					sortable="custom"
				>
					<template slot-scope="scope">
						{{ scope.row.tableBeginDate || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.tableEndDate]"
					label="牌桌结束时间"
					min-width="160"
					align="center"
					show-overflow-tooltip
					prop="tableEndDate"
					sortable="custom"
				>
					<template slot-scope="scope">
						{{ scope.row.tableEndDate || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.tableCode]"
					label="牌桌ID"
					min-width="180"
					align="center"
				>
					<template slot-scope="scope">
						<div
							v-if="scope.row.tableCode"
							class="blueColor decoration"
							@click="
								handleJump({
									path:
										'/dxn/gameManager/cardTablesList/cardTablesBase',
									query: {
										tableId: scope.row.tableCode
									}
								})
							"
						>
							{{ scope.row.tableCode }}
						</div>
						<div v-else>-</div>
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.tableName]"
					label="牌桌名称"
					min-width="100"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.tableName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.tableType]"
					label="游戏名称"
					min-width="100"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ typeFilter(scope.row.tableType, 'gameType') }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.bbBlindScore]"
					label="盲注"
					min-width="120"
					align="center"
					prop="bbBlindScore"
					sortable="custom"
				>
					<template slot-scope="scope">
						<ShowBlindInjection
							:tableType="scope.row.tableType"
							:bbBlindScore="scope.row.bbBlindScore"
							:sbBlindScore="scope.row.sbBlindScore"
							:anteSwitch="scope.row.anteSwitch"
							:anteScore="scope.row.anteScore"
							:straddleAmount="scope.row.straddleAmount"
						/>
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.clubId]"
					label="牌桌所属俱乐部ID"
					min-width="125"
					align="center"
				>
					<template slot-scope="scope">
						<div
							v-if="scope.row.clubId"
							class="blueColor decoration"
							@click="
								handleJump({
									path: '/dxn/clubManager/clubList',
									query: {
										clubId: scope.row.clubId
									}
								})
							"
						>
							{{ scope.row.clubId }}
						</div>
						<div v-else>-</div>
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.tableHandCount]"
					label="牌桌手牌数"
					min-width="120"
					align="center"
					prop="tableHandCount"
					sortable="custom"
				>
					<template slot-scope="scope">
						{{ scope.row.tableHandCount + '' || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.totalNetAmount]"
					label="会员总输赢"
					min-width="150"
					align="center"
					show-overflow-tooltip
					prop="totalNetAmount"
					sortable="custom"
				>
					<template slot-scope="scope">
						<span
							:style="handleNumberColor(scope.row.totalNetAmount)"
						>
							{{
								handleNumber(
									scope.row.currency,
									scope.row.totalNetAmount
								)
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.bringInChipScore]"
					label="牌桌筹码带入"
					min-width="150"
					align="center"
					show-overflow-tooltip
					prop="bringInChipScore"
					sortable="custom"
				>
					<template slot-scope="scope">
						<span>
							{{
								handleNumber(
									scope.row.currency,
									scope.row.bringInChipScore
								)
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.bringOutChipScore]"
					label="牌桌筹码带出"
					min-width="150"
					align="center"
					show-overflow-tooltip
					prop="bringOutChipScore"
					sortable="custom"
				>
					<template slot-scope="scope">
						<span>
							{{
								handleNumber(
									scope.row.currency,
									scope.row.bringOutChipScore
								)
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.bringInCount]"
					label="带入次数"
					min-width="150"
					align="center"
					show-overflow-tooltip
					prop="bringInCount"
					sortable="custom"
				>
					<template slot-scope="scope">
						{{ scope.row.bringInCount }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.grossProfit]"
					label="未抽水打牌输赢"
					min-width="150"
					align="center"
					show-overflow-tooltip
					prop="grossProfit"
					sortable="custom"
				>
					<template slot-scope="scope">
						<span :style="handleNumberColor(scope.row.grossProfit)">
							{{
								handleNumber(
									scope.row.currency,
									scope.row.grossProfit
								)
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.netAmount]"
					label="抽水后打牌输赢"
					min-width="150"
					align="center"
					show-overflow-tooltip
					prop="netAmount"
					sortable="custom"
				>
					<template slot-scope="scope">
						<span :style="handleNumberColor(scope.row.netAmount)">
							{{
								handleNumber(
									scope.row.currency,
									scope.row.netAmount
								)
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.userHandFee]"
					label="手牌服务费"
					min-width="150"
					align="center"
					show-overflow-tooltip
					prop="userHandFee"
					sortable="custom"
				>
					<template slot-scope="scope">
						<span>
							{{
								handleNumber(
									scope.row.currency,
									scope.row.userHandFee
								)
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.tableFee]"
					label="局服务费"
					min-width="150"
					align="center"
					show-overflow-tooltip
					prop="tableFee"
					sortable="custom"
				>
					<template slot-scope="scope">
						<span>
							{{
								handleNumber(
									scope.row.currency,
									scope.row.tableFee
								)
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.insuredNetAmount]"
					label="经典保险输赢"
					min-width="150"
					align="center"
					show-overflow-tooltip
					prop="insuredNetAmount"
					sortable="custom"
				>
					<template slot-scope="scope">
						<span
							:style="
								handleNumberColor(scope.row.insuredNetAmount)
							"
						>
							{{
								handleNumber(
									scope.row.currency,
									scope.row.insuredNetAmount
								)
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.evInsuredNetAmount]"
					label="EV保险输赢"
					min-width="150"
					align="center"
					show-overflow-tooltip
					prop="evInsuredNetAmount"
					sortable="custom"
				>
					<template slot-scope="scope">
						<span
							:style="
								handleNumberColor(scope.row.evInsuredNetAmount)
							"
						>
							{{
								handleNumber(
									scope.row.currency,
									scope.row.evInsuredNetAmount
								)
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.squidNetAmount]"
					label="鱿鱼输赢"
					min-width="150"
					align="center"
					show-overflow-tooltip
					prop="squidNetAmount"
					sortable="custom"
				>
					<template slot-scope="scope">
						<span
							:style="handleNumberColor(scope.row.squidNetAmount)"
						>
							{{
								handleNumber(
									scope.row.currency,
									scope.row.squidNetAmount
								)
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					fixed="right"
					:label="`${$t('dxn.card_ables_list.operate')}`"
					min-width="330"
					align="center"
				>
					<template slot-scope="scope">
						<div style="text-align: left;">
							<span
								class="text-link"
								@click="
									handleJump({
										path:
											'/dxn/gameManager/cardTablesList/cardTablesBase',
										query: {
											tableId: scope.row.tableCode
										}
									})
								"
							>
								牌桌详情
							</span>
							<span
								class="text-link ml15"
								@click="
									handleJump({
										path: '/dxn/insureManager/insureList',
										query: {
											tableId: scope.row.tableCode
										}
									})
								"
							>
								保险详情
							</span>
							<span
								class="text-link ml15"
								@click="
									handleJump({
										path: '/dxn/orderManager/orderList',
										query: {
											tableId: scope.row.tableCode
										}
									})
								"
							>
								订单详情
							</span>
							<span
								v-if="
									hasPermission('90750102') &&
										scope.row.squidGameSwitch === 2
								"
								class="text-link ml15"
								@click="
									handleJump({
										path: '/dxn/squidManager/squidList',
										query: {
											tableCode: scope.row.tableCode
										}
									})
								"
							>
								鱿鱼列表
							</span>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				v-show="!!total"
				class="pageValue"
				:current-page.sync="pageNum"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="$store.getters.pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
		<TableColumnSet
			v-if="colSettings.visible"
			:visible.sync="colSettings.visible"
			:dialogColumnData="dialogColumnData"
			:activityListField="activityListField"
			@submitColumnSet="submitColumnSet"
			@choiceColumnSet="choiceColumnSet"
		></TableColumnSet>
	</main-content>
</template>

<script>
import { routerNames } from '@/utils/consts'
import dayjs from 'dayjs'
import list from '@/mixins/list'
import { serviceChargeTypeArr, cardTableStatusArr } from '@/dict/dxn'
import summaryList from './components/summaryList'
import ShowBlindInjection from '@/components/Dxn/ShowBlindInjection'
import tableScroll from '@/utils/tableScroll'
import MainContent from '@/components/MainContent/index.vue'
import { tableColumns } from './components/tableColumn'
import TableColumnSet from '@/components/Dxn/TableColumnSet'
import dxnMixin from '@/mixins/dxnMixin'

const start = () =>
	dayjs()
		.startOf('day')
		.subtract(6, 'day')
const end = () => dayjs().endOf('day')

export default {
	name: routerNames.memberCardTableList,
	components: {
		TableColumnSet,
		ShowBlindInjection,
		MainContent
	},
	mixins: [list, summaryList, tableScroll, dxnMixin],
	data() {
		return {
			disabledSearch: false,
			exportBtnLoading: false,
			tableHeight: 480,
			otherDependenComponents: [],
			queryData: {
				tableCode: '',
				statusList: [],
				tableTypeList: [],
				clubId: '',
				userClubId: '',
				// clubName: '',
				dateTime: [start(), end()],
				blindScoreMin: undefined,
				blindScoreMax: undefined,
				netAmountMin: undefined,
				netAmountMax: undefined
			},
			statusOptions: [
				{
					value: 0,
					label: '未开始'
				},
				{
					value: 1,
					label: '进行中'
				},
				{
					value: 2,
					label: '已结束'
				}
			],
			cardTableStatusArr,
			serviceChargeTypeArr,
			subSummary: {},
			totalSummary: {},
			tableColumns
		}
	},
	computed: {
		gameTypes() {
			return this.globalDics.gameType || []
		}
	},
	created() {
		this.initIndexDB('memberCardTableList', this.activityListField)
		// this.getDxnGameManagerList()
	},
	methods: {
		// 获取游戏列表
		getDxnGameManagerList() {
			// this.$api
			// 	.getDxnGameManagerListBend()
			// 	.then((res) => {
			// 		this.gameList = res.data.gameConfigList || []
			// 	})
			// 	.catch((e) => {
			// 		console.error(e)
			// 	})
		},
		getCurrentParams() {
			const [startTime, endTime] = this.queryData.dateTime || []
			const params = {
				...this.queryData,
				createdStartAt: startTime
					? dayjs(startTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined,
				createdEndAt: endTime
					? dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined
			}
			if (!params.statusList?.length) {
				params.statusList = undefined
			}
			if (!params.tableTypeList?.length) {
				params.tableTypeList = undefined
			}
			delete params.dateTime
			return params
		},
		loadData() {
			const params = this.getParams(this.getCurrentParams())
			this.loading = true
			this.disabledSearch = true
			this.list = []
			this.subSummary = {}
			this.totalSummary = {}
			this.$api
				.getMemberCardTableListBend(params)
				.then((res) => {
					this.loading = false
					this.disabledSearch = false
					const { record = [], totalRecord, summary = [] } =
						res.data || {}
					this.list = record
					this.total = totalRecord || 0
					this.subSummary = summary[0] || {}
					this.totalSummary = summary[1] || {}
				})
				.catch(() => {
					this.loading = false
					this.disabledSearch = false
				})
		},
		handleSearch() {
			this.clearTableSort()
			this.pageNum = 1
			this.loadData()
		},
		reset() {
			this.resetQueryData()
			this.pageNum = 1
			// this.$refs.ruleForm.resetFields()
			this.queryData.dateTime = [start(), end()]
			this.loadData()
		},
		exportExcel() {
			const params = this.getParams(this.getCurrentParams())
			this.deleteExportParams(params)
			this.exportBtnLoading = true
			this.exportExcelPublic({
				api: 'exportMemberCardTableListBend',
				params
			}).finally(() => {
				this.exportBtnLoading = false
			})
		},
		// 跳转
		handleJump(obj) {
			this.$router.push(obj)
		}
	}
}
</script>

<style lang="scss" scoped>
.decoration {
	text-decoration: underline;
	cursor: pointer;
}
::v-deep .footer_count_row {
	min-height: 50px;
	height: 50%;
	display: flex;
	font-weight: 700;
	padding: 5px 0;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
::v-deep .footer_count_row_border {
	border-top: 1px solid #ebeef5;
}
.header-top-line {
	margin-top: -8px;
}
::v-deep .el-icon-question:after {
	font-size: 14px;
	margin-left: -2px;
}
</style>
